Me preguntaba Kozmica la forma de añadir el efecto rollover a un Link, me proporcionaba una página de referencia y mirando y probando creo que el efecto está conseguido, así que veamos lo que hice:

Añadimos un elemento de página y en HTML/Javascript añadimos lo siguiente:

<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>
<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>
<a class="sidebarlink" href="url-de-la-pagina">texto-link</a><span class="hide"></span>


Luego vamos a añadir unas líneas de código en la CSS, buscaremos donde
/* Sidebar Content, en algunas plantillas puede venir como /* ---( sidebar )--- */

Añadimos lo siguiente:

.sidebarlink{
text-align:left;
display:block;
background:#ffffff;
border-bottom:1px solid #000000;
padding:0px 5px 0px 5px;
margin:1px 0px 0px 0;
}

.sidebarlink:hover{
border-bottom:1px solid #000000;
background:#ccc;
}

En .sidebarlink{ es el link tal y como lo vemos.
En .sidebarlink:hover{ conseguimos el efecto rollover al pasar el cursor por encima.

Si añadimos a esas dos partes por ejemplo border-bottom:1px solid #000000; conseguimos una línea de separación entre las líneas de enlaces.

También podemos sustituir en background:#ccc; para el color de fondo del efecto rollover. Y en background:#ffffff; que será el color de fondo sin efecto.

El texto también podemos centrar el texto si sustituimos text-align:left; por text-align:center; o justificar a la derecha con text-align:right;

Podéis ver el efecto en "Enlaces" en esta prueba que hice.

!Suerte¡


Arcannus

uuu...Gem@ este efecto me encanta, ya lo probé y quedo de maravilla, muchas gracias como siempre ;)
pasate por mi nuevo blog!!:D

Responder
Gem@

Me alegra que te guste Arcannus ;)

Responder
Esteban

Hola Gem@, me he estado leyendo buena parte de tu blog y está realmente genial!!

Me detuve en ésta entrada porque estoy tratando de hacer algo parecido, pero el rollover es con una imagen, usando la propiedad background de CSS, (background: url() top no-repeat), que sin embargo no me resulta.

No quiero ponerte en la obligación de leerlo pero si te interesa escribeme y te expongo el problema completo, te parece?? Mi correo es tebitoo@gmail.com

Saludos!!

Responder
Gem@

yz Hola Esteban ¿te refieres a esto?
http://gemablog-.blogspot.com/2007/11/rollover-imagen-que-cambia-al-pasar-el.html

Responder
Esteban

Gem@, gracias por contestarme tan rápidamente.

Lo que me enlazas es exactamente el efecto que deseo hacer, cosa que con el método que te comenté me resultaba perfecto en otras páginas (he ayudado a pasar diseños de PSD a HTML+CSS). Lo que no entiendo es porque en Blogger no funciona, hay alguna restricción?? Ocupo mucho ése metódo y me gustaría seguir haciéndolo.

No sé si permites enlaces a otros sitios pero hice una consulta bastante detallada en éste foro:

http://conexionblogger.com/showthread.php?t=224

Y para hacerla más completa, saqué una captura de dicha consulta por si te da flojera registrarte a ver el tema xD!!:

http://i41.tinypic.com/331dqi8.png

Saludos!!

Responder
Gem@

Entiendo lo que quieres hacer lo que no entiendo es por qué lo añades a la plantilla dentro de una section cuando podemos hacerlo añadiendo una clase y en un gadget de la sidebar.
Prueba con esto.
En un gadget de html añadimos:
<a href="mailto:tebitoo@gmail.com" class="escribeme-span"/></a>

En la hoja de estilos lo siguiente.
a.escribeme-span {display: block;width: 181px;height: 48px;padding: 4px 0 0 0;background: transparent url(http://i694.photobucket.com/albums/vv310/tebitoo/Escribeme.jpg) no-repeat 0 0;text-align: center;color: #fff;text-decoration: none;}

a.escribeme-span:hover {
background:url(http://i694.photobucket.com/albums/vv310/tebitoo/Escribeme.jpg)no-repeat 0 -47px;}

Responder
Esteban

Ves?? Sabía que habia algo mal jaja... es que yo generalmente hago los diseños que se me encargan de esa forma (no son para Blogger).. y no sabia que en esta plataforma hay que ponerlos en un gadget.

Muchisimas gracias por tu ayuda, ahora estoy en el laburo pero apenas llegue a mi casa probaré lo aprendido hoy.

Un gran abrazo!! :D

Responder
Gem@

Es una gran comodidad utilizar los gadgets, en la plantilla también puedes añadirlo con la etiqueta span pero así resulta más sencillo.

Responder
Esteban

Gem@:

Lo probé y funcionó bien, el unico pero que le hallo es que no consigo cambiar el color de fondo de ese gadget, cual sería el indicador CSS? Estoy probando con:

#zona-pderecho .sidebar #html1{
background-color: #FFFFFF;
}

Pero no lo toma. También me entró la duda acerca de como se hace lo mismo con span, porque probando me pasa el mismo efecto que tenía antes. Puedes ver el resultado que tengo ahora en:

http://www.ayudadrivers.blogspot.com/

Muchas gracias de antemano!!

Responder
Gem@

yz Hay que localizar la id de ese gadget por ejemplo:
<b:widget id='HTML1' locked='false' title='' type='HTML'/>

Una vez sabemos la id en el ejemplo HTML1 creamos una clase y a esa clase le añadimos los estilos, con el color de fondo ;)

Responder
Luz

hola buenas, a mi me gustaría poner el efecto en las etiquetas de la barra lateral, es decir que cuando me ponga con el cursor me aparezcan burbujas que tengo en un gif, me puedes ayudar, muchas gracias el blog es www.luz-tic.blogspot.com

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top